<template>
  <div class="app-container">
    <div class="mapDiv" v-loading="loading">
      <!--地图-->
      <RzaIndexMap v-if="completeRefreshData==true"
                   @getMap="getMap"
                   :clickLonLatArr="clickLonLatArr"
                   :dzLonLatArr="resultForm.lonlat"
      ></RzaIndexMap>
      <!--工具条控件-->
      <ControlToolBar v-if="completeRefreshData==true"
                      :map="map" :pageType="pageType" :mapDrawType="mapDrawType"
                      @showSetEarthquake="showSetEarthquake"
                      @showFault="showFault"
                      @showImgcreate="showImgcreate"
                      @getClickLonLat="getClickLonLat"
                      :showHideButtonType="showHideButtonType"
      ></ControlToolBar>
      <!--超图图层显示-->
      <SuperMapLayer v-if="completeRefreshData==true"
                     :map="map" :layerDataTypeList="layerDataTypeList"
                     :resetClearAllBool="resetClearAllBool" :geomText="result.geomText"
                     :clickLonLat="clickLonLat" :resultLegend="result.resultLegendHtml"
                     @getAllTempLayersSetList="getAllTempLayersSetList"
                     @completeRefreshDataReturn="completeRefreshDataReturn"
      ></SuperMapLayer>
      <!-- 设定地震评估面板 -->
      <div v-show="showSetEarthquakeBool" class="new-pointSetDiv">
        <div class="new-pointSetDiv-head">
          <span style="left:10px;">设定地震</span>
          <span style="right:10px;cursor:pointer;" @click="hidePointSetDiv">关闭</span>
        </div>
        <div class="new-pointSetDiv-inner">
          <el-form :model="countParam" ref="pointSetForm" :rules="rules" label-position="right" label-width="130px">
            <el-form-item label="经纬度类型" prop="type">
              <el-radio-group v-model="countParam.type" @change="radioTypeChange" style="height: 27px;">
                <el-radio label="3">度分秒</el-radio>
                <el-radio label="1">度</el-radio>
                <el-radio label="2">度分</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="经度" prop="longitudeH" style="margin-bottom: 15px;">
              <template v-if="countParam.type=='3'">
                <el-input-number v-model="countParam.longitudeH" style="width:80px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
                <el-input-number v-model="countParam.longitudeM" style="width:80px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">′</span>
                <el-input-number v-model="countParam.longitudeS" style="width:80px;"
                          :precision="1" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">″</span>
              </template>
              <template v-if="countParam.type=='1'">
                <el-input-number v-model="countParam.longitudeH" style="width:150px;"
                          :precision="6" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
              </template>
              <template v-if="countParam.type=='2'">
                <el-input-number v-model="countParam.longitudeH" style="width:80px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
                <el-input-number v-model="countParam.longitudeM" style="width:120px;"
                          :precision="3" :step="0.001" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">′</span>
              </template>
            </el-form-item>
            <el-form-item label="纬度" prop="latitudeH" style="margin-bottom: 15px;">
              <template v-if="countParam.type=='3'">
                <el-input-number v-model="countParam.latitudeH" style="width:80px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
                <el-input-number v-model="countParam.latitudeM" style="width:80px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">′</span>
                <el-input-number v-model="countParam.latitudeS" style="width:80px;"
                          :precision="1" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">″</span>
              </template>
              <template v-if="countParam.type=='1'">
                <el-input-number v-model="countParam.latitudeH" style="width:150px;"
                          :precision="6" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
              </template>
              <template v-if="countParam.type=='2'">
                <el-input-number v-model="countParam.latitudeH" style="width:90px;"
                          :precision="0" :step="1" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">°</span>
                <el-input-number v-model="countParam.latitudeM" style="width:120px;"
                          :precision="3" :step="0.001" controls-position="right" @change="changeLonLat"></el-input-number>
                <span class="new-lonlat-span">′</span>
              </template>
            </el-form-item>
            <el-form-item label="震级" prop="earthQuakeLevel" style="margin-bottom: 15px;">
              <el-input-number v-model="countParam.earthQuakeLevel" style="width:120px;"
                        :precision="1" :step="0.1" :min="6.5" controls-position="right"></el-input-number>
            </el-form-item>
            <el-form-item label="震源深度(km)" prop="sourceDepth" style="margin-bottom: 15px;">
              <el-input-number v-model="countParam.sourceDepth" style="width:120px;"
                        :precision="2" :step="0.01" controls-position="right"></el-input-number>
            </el-form-item>
            <el-form-item label="断层性质" prop="faultProperties" style="margin-bottom: 15px;">
              <el-select v-model="countParam.faultProperties" placeholder="请选择" value-key="name" :clearable="true" style="width:120px;">
                <el-option v-for="item in faultPropertiesData" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活断层数据版本" prop="faultVersion" style="margin-bottom: 15px;">
              <span v-if="countParam.faultVersion" class="new-settingDiv-span" @click="showSelectDialog">{{countParam.faultVersion}}</span>
              <el-button v-else @click="showSelectDialog">选择</el-button>
            </el-form-item>
            <div style="margin-bottom: 5px;text-align: center;">
              <el-button @click="evaluateCount" type="primary">评估</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <!--评估结果选择查看-->
      <div class="new-resultSelectDiv" v-show="result.showResultBool">
        <p style="margin: 0px;">
          <span style="margin-right: 10px;">评估结果</span>
          <el-radio-group v-model="result.resultType" @change="resultTypeChange" style="height: 27px;">
            <el-radio label="1">地表破裂带评估</el-radio>
            <el-radio label="2">发震构造评估</el-radio>
          </el-radio-group>
        </p>
        <p style="text-align: center;" v-show="pageType=='查看地表破裂带评估结果'">
          <el-button @click="showResultFormBool=true" type="primary">查看设定地震参数</el-button>
        </p>
      </div>
      <!--地表破裂带宽度及同震位移查看-->
      <div class="new-LengthDisplayDiv" v-show="result.showResultBool">
        <el-form :model="ruptureLengthAndDisplacement" label-position="right" label-width="130px" label-color="white">
          <el-form-item label="地表破裂带长度：" prop="ruptureLength" style="margin-bottom: 15px;color:white;">
            <span class="new-settingDiv-span" style="color:black;">{{ruptureLengthAndDisplacement.ruptureLength}}</span>
          </el-form-item>
          <el-form-item label="同震位移数值：" prop="displacement" style="margin-bottom: 15px;color:white;">
            <span class="new-settingDiv-span" style="color:black;">{{ruptureLengthAndDisplacement.displacement}}</span>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查看设定地震参数窗口 -->
      <el-dialog
          v-model="showResultFormBool"
          title="查看设定地震参数"
          :width="400"
          :before-close="handleClose"
      >
        <div class="new-pointSetDiv-inner">
          <el-form :model="resultForm" ref="resultFormRef" label-position="right" label-width="130px">
            <el-form-item label="经度" prop="longitude" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.longitude}}</span>
            </el-form-item>
            <el-form-item label="纬度" prop="latitude" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.latitude}}</span>
            </el-form-item>
            <el-form-item label="震级" prop="earthQuakeLevel" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.earthQuakeLevel}}</span>
            </el-form-item>
            <el-form-item label="震源深度(km)" prop="sourceDepth" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.sourceDepth}}</span>
            </el-form-item>
            <el-form-item label="断层性质" prop="faultProperties" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.faultProperties}}</span>
            </el-form-item>
            <el-form-item label="活断层数据版本" prop="faultVersion" style="margin-bottom: 15px;">
              <span class="new-settingDiv-span">{{resultForm.faultVersion}}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!--版本选择面板-->
      <VersionDialog v-if="openDialog"
                     :open="openDialog" :type="dialogType" :geom="result.geomText"
                     @closeDialog="closeDialog" @selectVersionData="selectVersionData"
      ></VersionDialog>
      <!--生成图件-->
      <PrintMap v-if="showImgcreateBool"
                :open="showImgcreateBool" :geom="result.geomText"
                :mapLevel1Category="result.mapLevel1Category" :mapLevel2Category="result.mapLevel2Category"
                :legendSetList="result.legendSetList" :tempLayersSetList="result.tempLayersSetList"
                @closeImgDialog="closeImgDialog"
      ></PrintMap>
    </div>
  </div>
</template>

<script setup>
//地图
import RzaIndexMap from '@/map/ruptureZoneAssess/indexMap.vue';
import ControlToolBar from '@/map/components/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import VersionDialog from '@/map/ruptureZoneAssess/versionDialog.vue';
import PrintMap from '@/map/components/PrintMap/index.vue';
import {saveSurfaceRupture,evaluate} from '@/api/ruptureZoneAssess/indexMap.js';

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const pageType = ref("地表破裂带评估页面");
const mapDrawType = ref("Point");//点选
const showSettingDivBool = ref(true);//是否显示选择数据设置面板
//数据选择面板
const openDialog = ref(false);
//数据选择类型
const dialogType = ref("活断层数据");
const resetClearAllBool = ref(false);//是否清空全部超图图层

const data = reactive({
  countParam:{//计算参数
    type:"3",//3度分秒 1度 2度分
    longitudeH:0,//经度的度
    longitudeM:0,//经度的分
    longitudeS:0,//经度的秒
    latitudeH:0,//纬度的度
    latitudeM:0,//纬度的分
    latitudeS:0,//纬度的秒
    earthQuakeLevel:6.5,//震级
    sourceDepth:0,//震源深度
    faultProperties:"",//断层性质
    faultVersion: "",//活断层数据选择版本号
  },
  result:{
    geomText:"MULTIPOLYGON(((-180 -90,180 -90,180 90,-180 90,-180 -90)))",//空间数据
    mapLevel1Category:"9",//一级图件分类
    mapLevel2Category:"23",//二级图件分类
    legendSetList:[],//图层（临时图层）url列表--用于显示图例
    tempLayersSetList:[],//图层（临时图层）url列表--用于显示图层
    resultType:"1",//1地表破裂带评估 2发震构造评估
    showResultBool:false,//是否显示评估结果
  },
  //图层数据类别code和版本号显示列表
  layerDataTypeList:[{
    //活断层数据
    level2DataType:"hdc",//数据类别二级code
    level3DataType:"dc",//数据类别三级code
    versionCode:"",//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //地表破裂带震源
    level2DataType:"resultsurface",//数据类别二级code
    level3DataType:"dsr",//数据类别三级code
    versionCode:"",//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //地表破裂带同震位移
    level2DataType:"resultsurface",//数据类别二级code
    level3DataType:"dsrd",//数据类别三级code
    versionCode:"",//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //地表破裂带
    level2DataType:"resultsurface",//数据类别二级code
    level3DataType:"dsrf",//数据类别三级code
    versionCode:"",//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //发震构造评估区域
    level2DataType:"resultsurface",//数据类别二级code
    level3DataType:"fgs",//数据类别三级code
    versionCode:"",//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  }],
  faultPropertiesData:[
    {name:"走滑断层",value:"0"},
    {name:"逆断层",value:"1"},
    {name:"正断层",value:"2"},
    {name:"正走滑",value:"3"},
    {name:"逆走滑",value:"4"},
  ],
  rules: {
    longitudeH: [{ required: true, message: "经度不能为空", trigger: "blur" }],//经度的度
    latitudeH: [{ required: true, message: "纬度不能为空", trigger: "blur" }],//纬度的度
    earthQuakeLevel: [{ required: true, message: "震级不能为空", trigger: "blur" }],//震级
    sourceDepth: [{ required: true, message: "震源深度不能为空", trigger: "blur" }],//震源深度
    faultVersion: [{ required: true, message: "活断层数据选择版本号不能为空", trigger: "blur" }],//活断层数据选择版本号
  },
  resultForm:{
    num:"",//编号
    longitude:"",//经度
    latitude:"",//纬度
    earthQuakeLevel:"",//震级
    sourceDepth:"",//震源深度(km)
    faultProperties:"",//断层性质
    faultVersion:"",//断层版本号
    lonlat:[],//震源经纬度
  },
  ruptureLengthAndDisplacement:{
    ruptureLength:"",//地表破裂带长度
    displacement:"",//同震位移
  }
});

let {
  countParam,result,layerDataTypeList,faultPropertiesData,rules,resultForm,ruptureLengthAndDisplacement
} = toRefs(data);

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
}
const showSetEarthquakeBool = ref(false);
const showSetEarthquake = (val) =>{//设定地震
  showSetEarthquakeBool.value = val;
  if(val){
    showHideButtonType.value = "ShowSetEarthquake";
    result.value.showResultBool = false;//隐藏评估结果面板
  }else{
    showHideButtonType.value = "CloseSetEarthquake";
  }
}
const showFaultBool = ref(false);
const showFault = (val) =>{//活断层
  showFaultBool.value = val;
  if(val){
    let layerDataTypeArray = layerDataTypeList.value;
    if(layerDataTypeArray[0].versionCode==""){
      showHideButtonType.value = "CloseFault";
      // proxy.$modal.msgWarning("请先选择活断层版本");
      showSelectDialog();//选择活断层版本
    }else{
      showHideButtonType.value = "ShowFault";
      layerDataTypeArray[0].show = true;//显示
      layerDataTypeList.value = layerDataTypeArray;
    }
  }else{
    showHideButtonType.value = "CloseFault";
    let layerDataTypeArray = layerDataTypeList.value;
    layerDataTypeArray[0].show = false;//隐藏
    layerDataTypeList.value = layerDataTypeArray;
  }
  console.log("showFault")
  console.log(layerDataTypeList.value)
}
const showImgcreateBool = ref(false);
const showImgcreate = (val) =>{//生成图件
  showImgcreateBool.value = val;
  if(val){
    showHideButtonType.value = "ShowPrintImg";
  }else{
    showHideButtonType.value = "ClosePrintImg";
  }
}
//点击地图经纬度
const clickLonLat = ref([]);
//点选设定地震经纬度
const clickLonLatArr = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  // clickLonLat.value = lonlat;
  //点选设定地震经纬度
  setPointLonLat(lonlat);
}
//获取全部图层信息列表
const getAllTempLayersSetList = (obj)=>{
  console.log("getAllTempLayersSetList");
  if(obj) {
    let list = obj.list;
    console.log(list);
    if(list && list.length>0){
      result.value.tempLayersSetList = list;//图层（临时图层）url列表--用于显示图层
      result.value.legendSetList = list;//图层（临时图层）url列表--用于显示图例
    }
  }
}
/*地图传参end*/

//显示数据选择面板
const showSelectDialog = () =>{
  openDialog.value = true;
}
const closeDialog = (val)=>{
  if(val){
    openDialog.value = false;
  }
}
const selectVersionData = (obj) =>{
  if(obj) {
    countParam.value.faultVersion = obj.versionCode;
    let layerDataTypeArray = layerDataTypeList.value;
    layerDataTypeArray[0].versionCode = obj.versionCode;
    layerDataTypeList.value = layerDataTypeArray;
    showFault(true);//显示活断层
    proxy.$refs['pointSetForm'].validate(valid => {
      if(valid){
        //
      }
    });
  }
}
const showHideButtonType = ref("");//显示隐藏按钮类型
//关闭生成图件窗口
const closeImgDialog = (bool)=>{
  showImgcreateBool.value = false;
  showHideButtonType.value = "ClosePrintImg";
}

//关闭设定地震面板
function hidePointSetDiv(){
  showSetEarthquakeBool.value = false;
  showHideButtonType.value = "CloseSetEarthquake";
  clickLonLatArr.value = [];//清空设定地震点
}
//经纬度类型选择
function radioTypeChange(){
  //清空
  countParam.value.longitudeH = 0;
  countParam.value.longitudeM = 0;
  countParam.value.longitudeS = 0;
  countParam.value.latitudeH = 0;
  countParam.value.latitudeM = 0;
  countParam.value.latitudeS = 0;
}
//经纬度改变
function changeLonLat(val){
  let lonlat = null;
  if(countParam.value.type=="3"){
    let lon = countParam.value.longitudeH + (countParam.value.longitudeM / 60) + (countParam.value.longitudeS / 3600);
    let lat = countParam.value.latitudeH + (countParam.value.latitudeM / 60) + (countParam.value.latitudeS / 3600);
    lonlat = [lon,lat];
  }else if(countParam.value.type=="1"){
    let lon = countParam.value.longitudeH;
    let lat = countParam.value.latitudeH;
    lonlat = [lon,lat];
  }else if(countParam.value.type=="2"){
    let lon = countParam.value.longitudeH + (countParam.value.longitudeM / 60);
    let lat = countParam.value.latitudeH + (countParam.value.latitudeM /60);
    lonlat = [lon,lat];
  }
  //点选设定地震经纬度
  clickLonLatArr.value = lonlat;
}
//经纬度设置
function setPointLonLat(lonlat) {
  if(lonlat && lonlat.length==2 && showSetEarthquakeBool.value){
    //点选设定地震经纬度
    clickLonLatArr.value = lonlat;
    countParam.value.type = "1";
    //清空
    countParam.value.longitudeH = Number(Number(lonlat[0]).toFixed(6));//保留6位小数
    countParam.value.longitudeM = 0;
    countParam.value.longitudeS = 0;
    countParam.value.latitudeH = Number(Number(lonlat[1]).toFixed(6));//保留6位小数
    countParam.value.latitudeM = 0;
    countParam.value.latitudeS = 0;
  }
}

//评估
function evaluateCount(){
  proxy.$refs['pointSetForm'].validate(valid => {
    if (valid) {
      loading.value = true;
      //保存地表破裂带记录
      saveSurfaceRupture(countParam.value).then(res => {
        console.log("保存地表破裂带记录");
        console.log(res);
        if(res.data){
          countParam.value.dsrId = res.data;
          //地表破裂带评估
          evaluate(countParam.value).then(response => {
            console.log("地表破裂带评估");
            console.log(response);
            loading.value = false;
            if(response.data){
              proxy.$modal.msgSuccess("评估成功");
              hidePointSetDiv();//关闭设定地震面板
              // result.value.showResultBool = true;//显示评估结果面板
            }else{
              proxy.$modal.msgError(response.message);
            }
          }).catch(() => {
            proxy.$modal.msgError("评估失败");
            loading.value = false;
          });
        }else{
          proxy.$modal.msgError(res.message);
          loading.value = false;
        }
      }).catch(() => {
        proxy.$modal.msgError("评估失败");
        loading.value = false;
      });
    }
  });
}

//评估结果选择查看
function resultTypeChange(){
  let resultType = result.value.resultType;
  if(resultType=="1"){//1地表破裂带评估
    result.value.mapLevel2Category = "23";
    let layerDataTypeArray = layerDataTypeList.value;
    layerDataTypeArray[1].show = true;//显示地表破裂带震源
    layerDataTypeArray[2].show = true;//显示地表破裂带同震位移
    layerDataTypeArray[3].show = true;//显示地表破裂带
    layerDataTypeArray[4].show = false;//隐藏发震构造评估区域
    layerDataTypeList.value = layerDataTypeArray;
  }else if(resultType=="2"){//2发震构造评估
    result.value.mapLevel2Category = "22";
    let layerDataTypeArray = layerDataTypeList.value;
    layerDataTypeArray[1].show = false;//显示地表破裂带震源
    layerDataTypeArray[2].show = false;//显示地表破裂带同震位移
    layerDataTypeArray[3].show = true;//显示地表破裂带
    layerDataTypeArray[4].show = true;//显示发震构造评估区域
    layerDataTypeList.value = layerDataTypeArray;
  }
}

//是否显示查看设定地震参数窗口
const showResultFormBool = ref(false);
function handleClose(){
  showResultFormBool.value = false;//隐藏设定地震参数窗口
}

//初始化设置页面内容
function initSetPageType(){
  let num = route.query.num;
  if(num!=undefined){//查看地表破裂带评估结果详情
    pageType.value = "查看地表破裂带评估结果";
    result.value.showResultBool = true;//显示评估结果面板
    //关闭设定地震面板
    hidePointSetDiv();
    //断层版本号
    let faultVersion = route.query.faultVersion;
    let layerDataTypeArray = layerDataTypeList.value;
    layerDataTypeArray[0].versionCode = faultVersion;
    layerDataTypeArray[1].versionCode = num;
    layerDataTypeArray[2].versionCode = num;
    layerDataTypeArray[3].versionCode = num;
    layerDataTypeArray[4].versionCode = num;
    layerDataTypeList.value = layerDataTypeArray;
    //设定地震参数
    resultForm.value.num = route.query.num;//编号
    resultForm.value.longitude = route.query.longitude;//经度
    resultForm.value.latitude = route.query.latitude;//纬度
    resultForm.value.earthQuakeLevel = route.query.earthQuakeLevel;//震级
    resultForm.value.sourceDepth = route.query.sourceDepth;//震源深度(km)
    resultForm.value.faultProperties = route.query.faultProperties;//断层性质
    resultForm.value.faultVersion = route.query.faultVersion;//断层版本号
    let lon = Number(route.query.longitude);//经度
    let lat = Number(route.query.latitude);//纬度
    resultForm.value.lonlat = [lon,lat];//震源经纬度
    console.log("设定地震参数");
    console.log(resultForm.value);
    ruptureLengthAndDisplacement.value.ruptureLength=route.query.ruptureLength;
    ruptureLengthAndDisplacement.value.displacement = route.query.displacement;
    setTimeout(function(){
      //评估结果选择查看
      resultTypeChange();
    },2000);
  }else{//设定地震评估页面
    pageType.value = "地表破裂带评估页面";
    result.value.showResultBool = false;//隐藏评估结果面板
    //显示设定地震面板
    showSetEarthquake(true);
  }
  //显示地图模块
  completeRefreshData.value = true;
}

onMounted(() => {
  //初始化设置页面内容
  initSetPageType();
})
</script>

<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

/*设定地震面板*/
.new-pointSetDiv {
  position:absolute;
  top:20px;
  right:20px;
  width:440px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-pointSetDiv-head {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  padding: 10px;
  background: #1890ff;
}
.new-pointSetDiv-head span {
  position: absolute;
  color: #fff;
}
.new-pointSetDiv-inner {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 20px;
  padding-left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 478px;
}

.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}

.new-lonlat-span {
  width:15px;padding:5px;margin-top: -10px;
}
.new-resultSelectDiv {
  position: absolute;top: 20px;right: 20px;
  color:#fff;
  background: rgba(0, 27, 67, 0.7);
  border-radius: 4px;
  padding: 20px;
}

.new-LengthDisplayDiv {
  position: absolute;top: 150px;right: 20px;
  //color:#fff;
  background: rgb(205, 209, 215, 0.7);
  border-radius: 4px;
  padding: 20px;
}

:deep(.new-resultSelectDiv .el-radio){
  color:white;
}
</style>